<template>
    <div class="carousel-container">
        <div class="header">
            <el-upload v-model="data.fileList" class="upload-demos" :headers="data.headers" :action="data.action"
                :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove"
                :on-exceed="handleExceed" :on-success="handleSuccess" list-type="picture">
                <el-button type="primary" class="buttons">{{ $t('webAuto.imageUpload') }}</el-button>
            </el-upload>
        </div>
        <div class="list-img">
            <div class="img" v-for="(item, index) in data.fileList" :key="index">
                <el-image style="width: 100%; height: 100%" :src="item.url" :zoom-rate="1.2" :max-scale="7"
                    :min-scale="0.2" :preview-src-list="data.srcList" :initial-index="4" fit="cover" />
            </div>
        </div>
    </div>
</template>

<script setup>
import { reactive, onMounted } from "vue";
import uuid from "@/utils/uuid.js";
import homeApi from "@/api/home.js";

const data = reactive({
    uuid: '',
    fileList: [],
    action: `http://${process.env.NODE_ENV === 'dev' ? '10.1.22.31:9991/wflow/oss/oss-simple?bizId=' : 'api.eletile.com:18081/wflow-api/wflow/oss/oss-simple?bizId='}`,//附件上传的地址
    headers: {
        wflowtoken: localStorage.getItem("wflow-token")
    },//文件上传
    filedPath: '',
    fileList: [],
    srcList: [],
})

onMounted(() => {
    data.uuid = uuid()
    data.action = data.action + data.uuid + '&bizType=wflow-carousel'
    flieShowList()
})

const handlePreview = (uploadFile) => {
    window.open(uploadFile.response.data.url, '_blank')
}

// 上传成功 后 获取数据 刷新画面
const handleSuccess = (response, file, fileList) => {
    // location.reload()
    flieShowList()
}

// 文件列表移除文件时的钩子 删除
const handleRemove = (file, uploadFiles) => {
    homeApi.deleteFile([file.response.data.uuid]).then(res => {
        console.log(res.data)
        if (res.data.statusCode == 200) {
            ElMessage.success({ message: res.data.message })

        }
    })
}
//删除文件之前的钩子，参数为上传的文件和文件列表，
//  若返回 false 或者返回 Promise 且被 reject，则停止删除。
const beforeRemove = (uploadFile, uploadFiles) => {
    return ElMessageBox.confirm(
        `Cancel the transfer of ${uploadFile.name} ?`
    ).then(
        () => true,
        () => false
    )
}
//	当超出限制时，执行的钩子函数
const handleExceed = (files, uploadFiles) => {
    if (files.length > 100) {
        ElMessage.warning({ message: this.$t('webAuto.attachmentsUploaded') })
    }
}

// 获取上传的文件信息
const flieShowList = () => {
    homeApi.getFileList2('', 'wflow-carousel').then(res => {
        res.data.records.forEach(element => {
            element.checked = false
        });

        data.fileList = res.data.records
        data.fileList.forEach(element => {
            data.srcList.push(element.url)
        })
    })
}
</script>

<style lang="less" scoped>
@import "index.less";

* {
    margin: 0;
    padding: 0;
}

.carousel-container {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
    padding: 10px;

    .header {
        height: 50px;
        line-height: 50px;
        width: 100%;
        background-color: #fff;
        margin-bottom: 10px;
        padding: 0 10px;
        box-sizing: border-box;

        .buttons {
            height: 30px !important;
            width: auto !important;
            padding: 5px 10px !important;
        }
    }

    .list-img {
        flex: 1;
        overflow-y: auto;
        display: flex;
        flex-wrap: wrap;

        .img {
            flex: 0 0 33%;
            height: 360px;
        }
    }
}
</style>
